@import "color";

$pageHeight: 600px;
#container {
  width: 100%;
  background: #111;
}

.company, .contact, .recruitment, .cooperation {
  background: #FFF;
  width: 100%;
}

/*=====Company========*/
.company {
  height: 155vh;
  @media screen and (max-width: 780px) {
    height: 15rem;
  }
}

.company_image {
  position: fixed;
  width: 45vw;
  height: 100vh;
  float: left;
  margin: 0 0 0 0;
  z-index: 0;
  overflow: hidden;
  img {
    width: auto;
    height: 100%;
  }

  @media screen and (max-width: 780px) {
    width: 100%;
    height: 120vw;
  }
}

.company_info {
  position: relative;
  top: 25vh;
  left: 50vw;
  height: 400px;
  float: left;

  @media screen and (max-width: 780px) {
    position: absolute;
    left: 20px;
    right: auto;
    top: 120px;

    .title1 {
      color: #FFF;
    }
    .content2 {
      opacity: .95;
      color: #f6f6f6;
    }
  }

  .content2 {
    margin-top: 10px;
    width: 32vw;
    @media screen and (max-width: 780px) {
      width: 20em;
    }
  }

}

.letter {
  position: absolute;
  top: 85vh;
  width: 80vw;
  left: 6vw;
  height: 60vh;
  text-align: center;
  margin: 0 auto;
  background: #FBFBFD;
  padding: 1rem 1.6rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  @media screen and (max-width: 780px) {
    left: 4vw;
    width: 92vw;
    padding: .4rem .4rem;
    top: 7rem;
    height: 7rem;
    border-radius: 4px;
    border-bottom: 1px #EEE solid;
  }
  .content {
    position: relative;
    left: 0;
    text-align: center;
  }
  .btn_panel {
    position: absolute;
    bottom: 1rem;
    text-align: left;
    width: 100%;
    left:0;
    height: 1rem;
    .pages {
      position: absolute;
      float: left;
      bottom: 0;
      height: 1rem;
      left: 10%;
      line-height: 1.2rem;

      @media screen and (max-width: 780px) {
        //left: 10%;
        line-height: 1.4rem;
      }
      .mole {
        color: $golden;
        font-size: 0.6rem;
        font-style: italic;
        font-weight: bold;
        @media screen and (max-width: 780px) {
          font-size: 0.4rem;
        }
      }
      .deno {
        color: $lightGray;
        font-size: .3rem;
        @media screen and (max-width: 780px) {
          font-size: 0.2rem;
        }
      }
    }
    .buttons {
      position: relative;
      width: 20%;
      //left: -1.6rem;
      margin: 0 auto;
      height: 1rem;
      bottom: 0;

      @media screen and (max-width: 780px) {
        width: 30%;
        //left: -.4rem;
      }
      .left, .right {
        cursor: pointer;
        width: .8rem;
        height: .8rem;
        background-size: 100% 100%;
        transition: opacity 1s;
        opacity: 0.8;
        @media screen and (max-width: 780px) {
          width: .6rem;
          height: .6rem;
        }
      }

      .left:hover, .right:hover {
        opacity: 1;
      }
      .left {
        float: left;
        background-image: url('/static/image/left_dis.png');
      }
      .left.enable {
        background-image: url('/static/image/left.png');
      }
      .right {
        float: right;
        background-image: url('/static/image/right_dis.png');
      }
      .right.enable {
        background-image: url('/static/image/right.png');
      }
    }
  }
}

.letter:after {
  content: "";
  position: absolute;
  bottom: 5vh;
  left: 50%;
  width: 2px;
  height: 10vh;
  background: #C0A490 100%;
  opacity: 0.5;

  @media screen and (max-width: 780px) {
    bottom: 7vh;
    height: 6vh;
  }
}

.letter div {
  margin-top: 20px;
}

.plank {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: #FFF;
  top: 100vh;
  left: 0;

  @media screen and (max-width: 780px) {
    top: 600px;
  }
}

/*-------Company End-----*/

/*=======Contact=======*/
.contact {
  position: relative;
  text-align: center;
  height: auto;
  width: 100%;
  @media screen and (max-width: 780px) {
    width: 100%;
  }
}

.contact_top {
  position: relative;
  width: 100%;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
    @media screen and (max-width: 780px) {
      width: 100%;
      height: auto;
      display: none;
    }

  }
}

.contact_content {
  position: relative;
  background-color: #EEF1F6;
  text-align: center;
  height: 11rem;
  margin: 0 auto;
  @media screen and (max-width: 780px) {
    height: 17rem;
  }
  .title {
    position: relative;
    top: 2rem;
    @media screen and (max-width: 780px) {
      font-size: .6rem;
    }
  }
  .cont {
    position: relative;
    margin: 0 auto;
    margin-top: 2.2rem;
    width: 50vw;
    color: $ContentColor;

    @media screen and (max-width: 780px) {
      width: 85vw;
      margin-top: 2.4rem;
    }
  }
  div {
    position: relative;
    .contact_address {
      left: 20%;
      @media screen and(max-width: 780px) {
        left: 0;
      }
    }
    .contact_way {
      left: 60%;
      @media screen and(max-width: 780px) {
        left: 0;
        margin-top:5rem;
      }
    }
    .contact_way, .contact_address {
      top: 2.3rem;
      float: left;
      width: 30%;
      text-align: left;
      position: absolute;
      @media screen and(max-width: 780px) {
        margin-left: 30%;
        width:50%;
      }
      .line {
        position: relative;
        top: .2rem;
      }
      .contact_info {
        position: relative;
        top: 0.3rem;
        margin-top: 2vh;
        color: $darkInk;
        font-size: .3rem;
      }
    }
  }

}

.contact_bottom {
  position: relative;
  width: 100%;
  img {
    width: 100%;
    height: auto;
  }
}

/*-------Contact End-----*/

/*=======cooperation=======*/

.cooperation {
  position: relative;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  @media screen and (max-width: 780px) {
    width: 100%;
  }

}

.cooperation_top {
  position: relative;
  width: 100%;
  height: 100vh;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;

  @media screen and (max-width: 780px) {
    height: 500px;
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    @media screen and (max-width: 780px) {
      width: auto;
    }
  }

  .cooperation_title {
    position: relative;
    color: #fff;
    font-size: .8rem;
    text-align: center;
    margin: 0 auto;
    z-index: 1;
    margin-top: 4rem;
    width: 25em;
    @media screen and (max-width: 780px) {
      width: 90vw;
      margin-top: 3rem;
      font-size: .5rem;
      text-align: left;
    }
  }
  .hoverButton {
    margin: 0 auto;
    position: relative;
    margin-top: 1rem;
    //top: 205px;
    //z-index: 1;
    @media screen and (max-width: 780px) {
      margin: 0 0;
      top: 1rem;
      left: 10%;
      z-index: 1;

    }
  }
}

.cooperation_content {
  position: relative;
  background-color: #EEF1F6;
  color: #3F4447;
  overflow: hidden;
  .coopers {
    position: relative;
    margin-top: 3rem;
    margin-left: 30%;
    margin-bottom: 1.2rem;

    @media screen and(max-width: 780px) {
      margin-top: 150px;
      margin-left: 10vw;
    }

    div {
      line-height: 1.1em;
      text-align: left;
    }

    .cooper_title {
      margin-bottom: .5rem;
      font-size: .3rem;
      width: 46vw;
      line-height: 1.3em;
      display: block;
      @media screen and(max-width: 780px) {
        width: 80vw;
        margin-bottom: .2rem;
      }
    }
    .cooper_content {
      position: relative;
      margin-bottom: .2rem;
      @media screen and(max-width: 780px) {
        margin-bottom: .05rem;
        line-height: .4rem;
        width: 90%;
      }
    }
  }

}

.btitle {
  position: relative;
  top: 1.5rem;
  left: 83px;
  width: 6em;
  text-align: left;
  font-size: .6rem;
  color: $darkInk;
  @media screen and(max-width: 780px) {
    top: 80px;
    left: 23px;
  }
}

/*-------cooperation End--------*/

/*=======recruitment=======*/
.recruitment {
  position: relative;
  text-align: center;
  overflow: hidden;
  @media screen and(max-width: 780px) {
    position: relative;
    text-align: center;
    width: 100%;
  }
  .recruitment_top {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    @media screen and(max-width: 780px) {
      height: 80vh;
    }
    img {
      width: 100%;
      height: 100%;
      @media screen and(max-width: 780px) {
        width: auto;
        height: 100%;
      }
    }
  }

  //招聘背景面板
  .recruitment_info_panel {
    position: absolute;
    width: 60%;
    height: 60vh;
    background-color: #FFF;
    top: 20vh;
    left: 20%;
    opacity: 0.8;
    margin: 0 auto;

    @media screen and(max-width: 780px) {
      top: 20vh;
      width: 80%;
      left: 10%;
      height: 40vh;
    }

    .recruitment_title1, .recruitment_title2 {
      position: relative;
      font-family: $songti;
      top: 20%;
      margin-top: 1em;
      font-size: .30rem;
      @media screen and(max-width: 780px) {
        margin-top: .5em;
      }
    }

    .recruitment_title1 {
      font-size: .8rem;
      @media screen and(max-width: 780px) {
        font-size: .5rem;
        margin-bottom: .3rem;
      }
    }

    .recruitment_btn {
      position: relative;
      top: 30%;
      @media screen and(max-width: 780px) {
      }
    }

  }

}

.recruitment_content {
  position: relative;
  width: 100%;
  //height: 14rem;
  padding-bottom: 2rem;
  background-color: #FBFBFD;

  .jobs {
    position: relative;
    left: 20vw;
    margin-top: 3rem;
    width: 60vw;
    text-align: left;
    @media screen and(max-width: 780px) {
      left: 10vw;
      width: 80vw;
    }
    .job_intro {
      position: relative;
      margin-top: 1rem;
      margin-bottom: 1rem;
      width: 50vw;
      @media screen and(max-width: 780px) {
        width: 80vw;
      }
    }
    .job {
      position: relative;
      margin-top: .2rem;
      margin-bottom: 10px;
      width: 50vw;
    }
  }

}

/*-------recruitment End--------*/

@media screen and (min-width: 600px) {
}
